<template>
	<view class="content">
		<view class="input_box">
			<uni-easyinput  class="search_input" v-model="searchInput" @clear="search" @confirm="search" placeholder="请输入关键字" /> <text class="search_btn" @click="search(searchInput)">搜索</text>
		</view>
	
		<view class="tel_box">
			<view class="item_box" v-for="item in list">
				
				<view class="title_item">
					<view class="title_content" @click="editItem(item)">
						<view class="title_name">{{item.name}}</view>
						<view class="title_tel">{{item.tel}}</view>
					</view>
					<view class="title_remark">{{item.remark}}</view>
				</view>
				<view class="item_tel" @click.stop="callNumber(item.tel)">打电话</view>
			</view>
			<view class="add_btn" @click="goToAdd">
				<uni-icons type="plusempty" color="#fff"  size="32"></uni-icons>
				
			</view>
		<!-- 	<uni-fab
				:content="content"
				horizontal="right"
				vertical="bottom"
				:direction="direction"
				@fabClick="goToAdd"
			></uni-fab> -->
		</view>
		<view class="no_data" v-if="!list.length">暂无数据</view>
	</view>
</template>

<script>
		import { getRequest, postRequest } from '@/utils/request.js'
	export default {
		data() {
			return {
				searchInput: '',
				title: 'Hello',
				list:[
					// {
					// 	name: '陈剑',
					// 	tel: '18397410485'
					// },
					// {
					// 	name: '陈剑',
					// 	tel: '18397410485'
					// },
					]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(str="") {
				getRequest('phones/list', {name:str}).then(res => {
					if(res.code === 0) {
						this.list = res.data
					}
					console.log(res)
				})
				
			},
			search(e) {
				console.log(e)
				// uni.showToast('tijiao')
				let str = e || ''
				this.getList(str)
				console.log(e)
			},
			callNumber(number){
				uni.makePhoneCall({
					phoneNumber: number //仅为示例
				});
			},
			editItem(item){
				uni.navigateTo({
					url: `/pages/telAdd/telAdd?id=${item.id}`,
					complete: (com) => {
						console.log(com)
					}
				})
			},
			goToAdd() {
				uni.navigateTo({
					url: '/pages/telAdd/telAdd',
					complete: (com) => {
						console.log(com)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.input_box{
			display: flex;
			border-bottom: 1rpx solid #f5f5f5;
			.search_input{
				flex: 1;
				height: 60rpx;
				margin: 20rpx;
				border-radius: 16rpx;
				background-color: #f5f5f5;
				
			}
			.search_btn{
				display: inline-block;
				line-height: 60rpx;
				font-size: 24rpx;
				color: #007aff;
				margin: 20rpx;
				
			}
		    background: #fff;
			height: 100%;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			.header_btn{
				
			}
		}
	}
	.tel_box{
		background-color: $uni-bg-color;
		.item_box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.title_item{
				.title_content{
					display: flex;
					align-items: flex-end;
					.title_name{
						font-size: 30rpx;
					}
					.title_tel {
						margin-left: 10rpx;
						font-size: 24rpx;
						vertical-align: bottom;
					}
				}
				.title_remark{
					font-size: 24rpx;
					color: #ccc;
					margin: 10rpx 0;
				}
				
				
			}
			.item_tel{
				color: #007aff;
				font-size: 24rpx;
			}
		}
		.add_btn{
			position: fixed;
			right: calc(30px + var(--window-right));
		    bottom: calc(20px + var(--window-bottom));
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #007aff;
			box-shadow:0 2rpx 10rpx 4rpx rgba(0, 0, 0, 0.3);
			text-align: center;
			line-height: 100rpx;
			z-index: 100;
		}
		.tel_item{
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid $uni-line-color;
			.tel_content{
				display: flex;
				align-items: center;
				.tel_name{
					font-size: 36rpx;
					margin-right: 20rpx;
					// margin-bottom: 10rpx;
				}
				.tel_number {
					
				}
			}
			.call_btn{
				font-size: 28rpx;
				padding: 20rpx;
				border-radius: 15rpx;
				background-color: red;
				color: #fff;
			}
			
		}
	}
	.no_data{
		text-align: center;
		padding: 20rpx;
	}
/* 	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
</style>
